<template>
	<el-dialog class="abow-dialog" :visible.sync="visible"
		:title="!id ? '新增' : '修改'" :close-on-click-modal="false"
		:close-on-press-escape="false" width="650px" @close="closeFn">
		<el-form class="form" :model="dataForm" :rules="dataRule" ref="dataForm" label-width="160px" size="medium" :inline="false"
			labelSuffix="：">
			<el-form-item prop="applet_id" label="选择小程序">
				<el-select clearable v-model="dataForm.applet_id" :disabled="id ? true : false" placeholder="请选择" @focus="playletListFn">
					<el-option v-for="(item,index) in playletList" :key="index" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item prop="name" label="券名称">
				<el-input clearable v-model="dataForm.name" placeholder="券名称" />
			</el-form-item>

			<el-form-item prop="receive_time" label="券模板生效时间">
				<el-date-picker
					v-model="dataForm.receive_time"
					type="datetimerange"
					:picker-options="pickerOptions"
					placeholder="选择日期">
				</el-date-picker>
			</el-form-item>



			<el-form-item v-if="!id" prop="stock_number" label="券模板最大库存">
				<el-input-number v-model="dataForm.stock_number" :min="0"  label="描述文字"></el-input-number>
				<span style="margin-left: 6px;">张</span>
			</el-form-item>


			<el-form-item prop="consume_desc" label="使用须知" >
				<el-input
					type="text"
					placeholder="请输入内容"
					v-model="dataForm.consume_desc"
					maxlength="15"
					show-word-limit
					>
				</el-input>
			</el-form-item>

			<el-form-item prop="receive_desc" label="领取须知" >
				<el-input
					type="text"
					placeholder="请输入内容"
					v-model="dataForm.receive_desc"
					maxlength="15"
					show-word-limit
					>
				</el-input>
			</el-form-item>

			<el-form-item prop="send_desc" label="发放须知" >
				<el-input
					type="text"
					placeholder="请输入内容"
					v-model="dataForm.send_desc"
					maxlength="15"
					show-word-limit
					>
				</el-input>
			</el-form-item>

			<el-form-item prop="valid_duration" label="用户领取有效时长">
				<el-input-number v-model="dataForm.valid_duration"  :min="0"  label="描述文字"></el-input-number>
				<span style="margin-left: 6px;">天</span>
			</el-form-item>
			

		</el-form>
		<template slot="footer">
			<el-button @click="visible = false">{{ $t('views.public.cancel') }}</el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('views.public.confirm') }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import {
		debounce
	} from 'lodash'
	import {handleNumber2} from '@/libs/validate'
	import schema from 'async-validator'
	export default {
		data() {

			return {

				pickerOptions: {
       				 disabledDate(time) {
          				return time.getTime() < Date.now() - 8.64e7 || time.getTime() > Date.now() + 8.64e7*60;
          				// 这里的逻辑可以根据您的需求进行调整，这个示例是禁用前一天和后一天的日期
        			}
      			},
				handleNumber2,
				id:null,
				playletList:[],
				visible: false,
				rawData:{},
				dataForm: {
					applet_id:'',//短剧ID
					name:'',
					receive_time:'',
					// discount_type =3
					// receive_begin_time:'',
					// receive_end_time:'',
					stock_number:0,
					consume_desc:'',
					receive_desc:'',
					send_desc:'',
					valid_duration:0,
					discount_type:3,
					valid_type:2
				}
			}
		},
		created() {
			this.rawData = JSON.parse(JSON.stringify(this.dataForm))
		},
		computed: {
			dataRule() {
				return {
					applet_id: [{
							required: true,
							message: '小程序不能为空!',
							trigger: ['blur','change']
						}
					],
					name: [{
							required: true,
							message: '券名称不能为空!',
							trigger: ['blur','change']
						}
					],
					receive_time: [{
							required: true,
							message: '券模板生效时间不能为空!',
							trigger: ['blur','change']
						}
					],
				
					stock_number: [{
							required: true,
							message: '券模板最大库存不能为空!',
							trigger: ['blur','change']
						}
					],
					consume_desc: [{
							required: true,
							message: '使用须知不能为空!',
							trigger: ['blur','change']
						}
					],
					receive_desc: [{
							required: true,
							message: '领取须知不能为空!',
							trigger: ['blur','change']
						}
					],
					send_desc: [{
							required: true,
							message: '发放须知不能为空!',
							trigger: ['blur','change']
						}
					],
					valid_duration: [{
							required: true,
							message: '用户领取的有效时长不能为空!',
							trigger: ['blur','change']
						}
					]
				
				}
			}
		},
		methods: {
			closeFn(){
				this.$refs.dataForm.resetFields();
			},
			//获取短剧列表
			async playletListFn() {
				const pRes = await this.$axios.get(`/api/common/applet/2`);
				console.log(pRes);
				if(Array.isArray(pRes)) {
					if (pRes.length) {
						this.playletList = pRes;
						return;
					}
				}
				this.playletList = [];
			},
			init() {
		
				this.dataForm = JSON.parse(JSON.stringify(this.rawData))
				this.visible = true;
				this.playletListFn();
				this.$nextTick(() => {
					this.$refs.dataForm.resetFields();
				})
			},
			update(row) {
				this.visible = true
				this.playletListFn();
				this.$nextTick(() => {
					this.$refs.dataForm.resetFields();
					this.dataForm = Object.assign({}, row)
				})
			},
			conversion_time(time){
			var date = new Date(time);

			// 获取年、月、日、时、分、秒
			var year = date.getFullYear();
			var month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份从0开始，需要加1
			var day = ('0' + date.getDate()).slice(-2);
			var hours = ('0' + date.getHours()).slice(-2);
			var minutes = ('0' + date.getMinutes()).slice(-2);
		

			// 组合成所需的格式
			var formattedDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
			return formattedDate
			},
			// 表单提交
			dataFormSubmitHandle: debounce(function() {

				// let  formattedDate = this.conversion_time(this.dataForm.receive_time)


				// console.log(formattedDate); // 输出格式化后的时间字符串
			
				
			
				this.$refs.dataForm.validate((valid) => {
					console.log(valid + '--+++++-----------')
					if (!valid) {
						return false
					}
					
					let dataForm = JSON.parse(JSON.stringify(this.dataForm))
					dataForm.receive_time.forEach((element,index) => {
						dataForm.receive_time[index] = this.conversion_time(element)
					}); 

					console.log(242,dataForm)
				
					this.$axios.post(this.id?`/api/playlet/appletCoupon/update/${this.id}`:'/api/playlet/appletCoupon/create', dataForm).then(res => {
						this.$message({
							message: this.$t('views.public.success'),
							type: 'success',
							duration: 500,
							onClose: () => {
								this.visible = false;
								this.$emit('refreshDataList');
							}
						})
					}).catch(() => {})
				})
			}, 1000, {
				leading: true,
				trailing: false
			})

			
		}
	}
</script>

<style lang="scss" scoped>
	.form{
		width: 540px;
	}
	:deep(.el-textarea__inner){
		min-height: 40px !important;
		max-height: 40px !important;
	}
	.el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner{
		width:380px;
	}
</style>